<template>
  <PageContainer>
    <view class="container">
      <Header title="活动安排" />
      <view class="tips">
        {{ globalConfig?.name }}欢迎您参加本次活动，以下是本次活动您的行程安排：
      </view>
      <template v-for="(v, i) in dataList" :key="i">
        <view class="scheduling-item">
          <view class="item-row">
            <text class="label">安排名称：</text>
            <text class="value text-overflow-1">
              {{ v.name }}
            </text>
          </view>
          <view v-if="v.displayName" class="item-row">
            <text class="label">位置编号：</text>
            <text class="value text-overflow-1">{{ v.displayName }}</text>
          </view>
          <view v-if="v.startTime" class="item-row">
            <text class="label">
              <text>时</text>
              <text style="color: #fff">占位</text>
              <text>间：</text>
            </text>
            <text class="value text-overflow-1">{{ v.startTime }}</text>
          </view>
          <view v-if="v.address" class="item-row">
            <text class="label">
              <text>地</text>
              <text style="color: #fff">占位</text>
              <text>点：</text>
            </text>
            <text class="value text-overflow-1">{{ v.address }}</text>
          </view>
        </view>
      </template>
      <Empty v-if="!dataList?.length" text="暂无活动安排"></Empty>
    </view>
  </PageContainer>
</template>

<script setup lang="ts">
  import PageContainer from '@/components/PageContainer/index.vue';
  import { findActivityArrangeList, registerArrangeList } from '@/api/activity';
  import { type FindActivityArrangeListResult } from '@/api/activity/types';
  import Header from '@/components/Header/index.vue';
  import { onLoad } from '@/router';
  import { useAppStoreWithOut } from '@/store/modules/app';
  import { ref } from 'vue';
  import Empty from '@/components/Empty/Empty.vue';

  const dataList = ref<FindActivityArrangeListResult[]>([]);
  const { globalConfig } = useAppStoreWithOut();

  onLoad<'ActivityScheduling'>(async (op) => {
    if (op.sceneType === 'order' && op.activityRegisterId) {
      // 通过订单查询排座信息
      dataList.value = await registerArrangeList(op.activityRegisterId);
    } else {
      dataList.value = await findActivityArrangeList({
        activityId: (op.activityId || op.id) as number,
        activityRegisterId: (op.activityRegisterId || op?.userId) as number,
      });
    }
  });
</script>

<style lang="scss" scoped>
  .container {
    padding: 30rpx;
    .tips {
      color: #aaabab;
      font-size: 24rpx;
      margin-bottom: 30rpx;
    }
    .scheduling-item {
      background-color: #fff;
      padding: 20rpx 30rpx;
      margin-bottom: 30rpx;
      border-radius: 20rpx;
      .item-row {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        margin-bottom: 10rpx;
        .label {
          color: #808080;
          // margin-right: 20rpx;
          text-align: justify;
        }
        .value {
          color: #333;
          flex: 1;
        }
      }
    }
  }
</style>
